import React from "react";
import {
  View,
  Text,
  StyleSheet,
  Platform,
  PixelRatio,
  Dimensions,
  Animated,
  Easing,
  Image
} from "react-native";
import { JDDevice, JDText } from "@areslabs/jdreact-core-lib";
export default class JDVideo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      translateY: new Animated.Value(0),
      textTitle: this.getIamgeUrl(this.props.textTitle)
    };
  }
  //补全路径
  handleUrl(url) {
    let reg = RegExp(/http/);
    if (!reg.test(url)) {
      return "https:" + url;
    }
    return url;
  }
  componentDidMount() {
    //  console.dir(this.props.textTitle)
    this.getIamgeUrl(this.props.textTitle);
    this.showHeadBar(0, this.state.textTitle.length); //从第0条开始，轮播5条数据
  }
  getIamgeUrl(data) {
    //返回分割后的数组
    data = data.replace(/\s+/g, "");
    let urlArray = data.split("|"); // console.log(urlArray);
    if (data !== "") {
      return urlArray;
    }
    return null;
  }
  showHeadBar(index, count) {
    index++;
    Animated.timing(this.state.translateY, {
      toValue: -JDDevice.getRpx(this.props.bgHeight) * index*2,
      duration: 300,
      Easing: Easing.linear,
      delay: 1000
    }).start(() => {
      if (index >= count) {
        index = 0;
        this.state.translateY.setValue(0);
      }
      this.showHeadBar(index, count); //循环动画
    });
  }
  render() {
    return (
      <View
        style={{ height: this.props.bgHeight, width: JDDevice.getRpx(750) }}
      >
        <Image
          source={{ uri: this.handleUrl(this.props.imagebk) }}
          style={{
            position: "absolute",
            left: 0,
            top: 0,
            width: JDDevice.getRpx(750),
            height: this.props.bgHeight
          }}
        ></Image>
        <View style={[styles.container,{height:this.props.bgHeight}]}>
          <Animated.View
            style={[
              {
                left: this.props.bt1PositionLeft,
                top: this.props.bt1PositionTop,
                position:'absolute'
              },
              {
                transform: [
                  {
                    translateY: this.state.translateY
                  }
                ]
              }
            ]}
          >
            {this.state.textTitle.map((item, index) => {
              return (
                <View style={[styles.bar,{height:this.props.bgHeight}]} key={index}>
                  <JDText
                    style={{
                      color: this.props.fontColor,
                      fontSize: this.props.fontSize,
                      textOverflow: "ellipsis",
                      whiteSpace: "nowrap",
                      overflow: "hidden",
                      width: JDDevice.getRpx(400)
                    }}
                  >
                    {item}
                  </JDText>
                </View>
              );
            })}
          </Animated.View>
        </View>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    marginTop: JDDevice.getRpx(5),
   // height: JDDevice.getRpx(160),
    overflow: "hidden",
    borderRadius: 14
  },
  bar: {
    // height: JDDevice.getRpx(160),
    justifyContent: "center"
  }
});
